<template>
	<view class="content">
		<web-view :src="url"></web-view>
		<view @click="downLoadFile" class="download-btn">下载</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// pdf.js的viewer.htm所在路径
			// 注意：静态的html文件需要放在根路径下的 hybrid/html 文件夹中
			viewerUrl: "../../static/lib/pdfjs-2.10.377-dist/web/viewer.html",
			// 要访问的pdf的路径
			// fileUrl: 'http://localhost:8080/static/2.PDF',
			// 最终显示在web-view中的路径
			url: '',
			fileUrl: ""
		};
	},
	onLoad(option) {
		this.fileUrl = option.url;
		// h5，使用h5访问的时候记得跨域
		// #ifdef H5
		this.url = `${this.viewerUrl}?file=${encodeURIComponent(option.url)}`;
		// #endif
		
		// 在安卓和ios手机上
		// 判断是手机系统：安卓，使用pdf.js
		// #ifdef APP-PLUS
		if(plus.os.name === 'Android') {
			this.url = `${this.viewerUrl}?file=${encodeURIComponent(option.url)}`;
		}
		// ios，直接访问pdf所在路径
		else {
			this.url = encodeURIComponent(option.url);
		}
		// #endif
	},
	methods: {
		downLoadFile(){
			window.open(this.fileUrl);
		}
	}
};
</script>

<style scoped>
.download-btn{
	position: fixed;
	z-index: 999;
	bottom: 180rpx;
	right: 30rpx;
	width: 100rpx;
	height: 100rpx;
	background: rgb(255, 191, 16);
	border-radius: 50%;
	line-height: 100rpx;
	text-align: center;
	color:#fff;
	font-size: 30rpx;
}
</style>